<template>
  <!-- 下单弹窗 -->
  <view class="order-popup" v-if="showOrderPopup">
    <!-- 遮罩层 -->
    <view class="mask" @click="closePopup"></view>
    <!-- 弹窗内容 -->
    <view class="popup-content">
      <!-- 弹窗标题 -->
      <view class="popup-header">
        <!-- <text class="title">确认订单</text> -->
        <text class="close-btn" @click="closePopup">×</text>
      </view>
      
      <!-- 商品信息 -->
      <view class="product-info">
        <image class="product-cover" :src="selectedProduct.url"></image>
        <view class="product-desc">
          <text class="product-name">{{ selectedProduct.name }}</text>
          <text class="product-count">数量: {{ quantity }}</text>
        </view>
        <text class="product-price">¥{{ (selectedProduct.price * quantity).toFixed(2) }}</text>
      </view>
      
      <!-- 收货信息 -->
      <view class="address-section">
        <text class="section-title">收货信息</text>
        <view class="address-detail">
          <text class="consignee">{{ receiver.name }} {{ receiver.phone }}</text>
          <text class="address-text">{{ receiver.address }}</text>
        </view>
      </view>
      
      <!-- 支付方式 -->
      <view class="pay-methods">
        <text class="section-title">支付方式</text>
        <radio-group class="method-group" v-model="selectedPayMethod">
          <label class="method-item" v-for="(method, index) in payMethods" :key="index">
            <radio :value="method.value" color="#ff8aa5" />
            <image class="method-icon" :src="method.icon"></image>
            <text class="method-text">{{ method.text }}</text>
          </label>
        </radio-group>
      </view>
      
      <!-- 备注信息 -->
      <view class="remark-section">
        <text class="section-title">订单备注</text>
        <input 
          class="remark-input" 
          v-model="orderRemark" 
          placeholder="请输入备注信息" 
          placeholder-style="color: #ccc;"
        />
      </view>
      
      <!-- 金额信息 -->
      <view class="amount-info">
        <view class="amount-item">
          <text class="label">商品总价</text>
          <text class="value">¥{{ (selectedProduct.price * quantity).toFixed(2) }}</text>
        </view>
        <view class="amount-item">
          <text class="label">运费</text>
          <text class="value">¥0.00</text>
        </view>
        <view class="amount-item total">
          <text class="label">实付款</text>
          <text class="value">¥{{ (selectedProduct.price * quantity).toFixed(2) }}</text>
        </view>
      </view>
      
      <!-- 底部按钮 -->
      <view class="popup-footer">
        <button class="submit-btn" @click="submitOrder">
          确认支付 ¥{{ (selectedProduct.price * quantity).toFixed(2) }}
        </button>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref, computed } from 'vue';
import { StyleOption } from './goods-detail.vue'; // 导入商品详情页的类型定义

// 定义数据类型
interface PayMethod {
  value: string;
  icon: string;
  text: string;
}

interface ReceiverInfo {
  name: string;
  phone: string;
  address: string;
}

// 接收父组件参数
const props = defineProps<{
  show: boolean;
  selectedProduct: StyleOption & { price: number };
  quantity: number;
  address: string;
}>();

// 暴露事件
const emit = defineEmits<{
  (e: 'close'): void;
  (e: 'submit', orderInfo: any): void;
}>();

// 状态管理
const showOrderPopup = computed(() => props.show);
const quantity = computed(() => props.quantity);
// const selectedProduct = computed(() => props.selectedProduct);
const selectedProduct=ref({
	id : 123,
	name : "动物乐园",
	url : '/static/img/fox.jpg',
	price:'69.88',
})
// 收货信息
const receiver = ref<ReceiverInfo>({
  name: '张三',
  phone: '138****6789',
  address: props.address
});

// 支付方式
const payMethods = ref<PayMethod[]>([
  { value: 'wechat', icon: '/static/icon/wechat.png', text: '微信支付' },
  { value: 'alipay', icon: '/static/icon/alipay.png', text: '支付宝' }
]);
const selectedPayMethod = ref('wechat');

// 订单信息
const orderRemark = ref('');

// 方法
const closePopup = () => {
  emit('close');
};

const submitOrder = () => {
  const orderInfo = {
    productId: selectedProduct.value.id,
    productName: selectedProduct.value.name,
    quantity: quantity.value,
    price: selectedProduct.value.price,
    totalAmount: selectedProduct.value.price * quantity.value,
    payMethod: selectedPayMethod.value,
    receiver: receiver.value,
    remark: orderRemark.value
  };
  
  // 提交订单逻辑
  emit('submit', orderInfo);
  uni.showToast({
    title: '订单提交成功',
    icon: 'success'
  });
  closePopup();
};
</script>

<style scoped>
/* 弹窗容器 */
.order-popup {
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  z-index: 999;
  display: flex;
  justify-content: flex-end;
  align-items: flex-end;
}

/* 遮罩层 */
.mask {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(0, 0, 0, 0.5);
}

/* 弹窗内容 */
.popup-content {
  width: 100%;
  background-color: #fff;
  border-top-left-radius: 16px;
  border-top-right-radius: 16px;
  padding: 16px;
  max-height: 85vh;
  overflow-y: auto;
  box-sizing: border-box;
  animation: slideUp 0.3s ease forwards;
}

/* 弹窗动画 */
@keyframes slideUp {
  from {
    transform: translateY(100%);
  }
  to {
    transform: translateY(0);
  }
}

/* 弹窗头部 */
.popup-header {
  display: flex;
  justify-content: center;
  align-items: center;
  position: relative;
  margin-bottom: 16px;
}

.title {
  font-size: 18px;
  font-weight: bold;
  color: #333;
}

.close-btn {
  position: absolute;
  right: 0;
  font-size: 24px;
  color: #999;
}

/* 商品信息 */
.product-info {
  display: flex;
  align-items: center;
  padding: 16px 0;
  border-bottom: 1px solid #f5f5f5;
  margin-bottom: 16px;
}

.product-cover {
  width: 80px;
  height: 80px;
  border-radius: 8px;
  margin-right: 12px;
}

.product-desc {
  flex: 1;
}

.product-name {
  font-size: 14px;
  color: #333;
  line-height: 1.4;
}

.product-count {
  font-size: 12px;
  color: #999;
  margin-top: 8px;
}

.product-price {
  font-size: 16px;
  color: #ff8aa5;
  font-weight: bold;
}

/* 收货信息 */
.address-section {
  margin-bottom: 16px;
}

.section-title {
  font-size: 14px;
  font-weight: bold;
  color: #333;
  margin-bottom: 12px;
  display: block;
}

.address-detail {
  background-color: #f9f9f9;
  padding: 12px;
  border-radius: 8px;
}

.consignee {
  font-size: 14px;
  color: #333;
  display: block;
  margin-bottom: 8px;
}

.address-text {
  font-size: 13px;
  color: #666;
  line-height: 1.4;
}

/* 支付方式 */
.pay-methods {
  margin-bottom: 16px;
}

.method-group {
  display: flex;
  flex-direction: column;
}

.method-item {
  display: flex;
  align-items: center;
  padding: 12px 0;
  border-bottom: 1px solid #f5f5f5;
}

.method-item:last-child {
  border-bottom: none;
}

.method-icon {
  width: 24px;
  height: 24px;
  margin: 0 12px;
}

.method-text {
  font-size: 14px;
  color: #333;
}

/* 备注信息 */
.remark-section {
  margin-bottom: 16px;
}

.remark-input {
  width: 100%;
  height: 80px;
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 12px;
  font-size: 14px;
  color: #333;
  box-sizing: border-box;
}

/* 金额信息 */
.amount-info {
  background-color: #f9f9f9;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 24px;
}

.amount-item {
  display: flex;
  justify-content: space-between;
  margin-bottom: 12px;
  font-size: 14px;
}

.amount-item:last-child {
  margin-bottom: 0;
}

.label {
  color: #666;
}

.value {
  color: #333;
}

.total {
  margin-top: 12px;
  padding-top: 12px;
  border-top: 1px solid #eee;
}

.total .label {
  color: #333;
  font-weight: bold;
}

.total .value {
  color: #ff8aa5;
  font-weight: bold;
  font-size: 16px;
}

/* 底部按钮 */
.popup-footer {
  position: sticky;
  bottom: 0;
  padding: 16px;
  background-color: #fff;
  margin: 0 -16px;
}

.submit-btn {
  width: 100%;
  height: 48px;
  line-height: 48px;
  background-color: #ff8aa5;
  color: #fff;
  font-size: 16px;
  border-radius: 24px;
  border: none;
}
</style>